<template>
    <view class="s-page-wrapper is-100vh">
        <view class="is-33vh has-mgt-10" style="text-align: center;">
            <view class="is-flex is-column is-justify-center  is-align-center is-height-100">
                <image src="../../static/img/common/th.png" mode="aspectFit" class="logoimg"></image>
            </view>
        </view>
        <view class="content">
            <!--            <view class="welcome">
                欢迎回来！
            </view> -->
            <view class="has-mglr-10 ">
                <view class=" has-mgtb-10 ">
                    <!-- type="number" maxlength="11" -->
                    <input v-model="login.username" placeholder="请输入用户名" class="is-input1 " @input="BindInput"
                        data-val="username" />
                </view>
                <view class=" has-radius has-mgtb-10">
                    <input v-model="login.password" placeholder="请输入登录密码" class="is-input1" password="true"
                     @input="BindInput"
                        data-val="password"  />
                </view>

                <view class=" loginbtn has-radius has-mgtb-20">
                    <button :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}}
                    </button>
                    <button @click="goRegister()">注册</button>
                </view>

            </view>
        <view class="is-20vh has-mgt-80 content" style="text-align: center;">
            <navigator url="#" class=" has-radius is-right is-grey has-mgr-20" hover-class="">
                <text @click="goForget" class="is-blue" style="color: rgb(104, 162, 232);">忘记密码？</text>
            </navigator>
        </view>
        </view>
    </view>
</template>

<script>
    // import WebSocket from '@/commom/websocket.js';
    export default {
        data() {
            return {
                login: {
                    loading: false,
                    username: "",
                    password: ""
                },
                respData: {},
            };
        },
        methods: {
            defaultHandlerLogin: function() {
                if (!this.login.password || !this.login.username) {
                    uni.showToast({
                        title: "账号与密码不能为空",
                        icon: "none"
                    });
                    return;
                };
                this.login.loading = true;
                uni.request({
                    url: '/gongyi/user/validateUser',
                    method: 'POST',
                    data: {
                        username: this.login.username,
                        password: this.login.password,
                    },
                    success: async (res) => {
                        this.respData = res.data;
                        console.log(this.respData);
                        if (this.respData.status == 1) {
                            uni.showToast({
                                title: "登录成功！",
                                icon: 'none'
                            });
                            uni.setStorage({
                                data: this.respData.user,
                                key: 'user',
                                success: () => {
                                    console.log("success")
                                }
                            });
                            // await WebSocket.connectSocketInit();
                            uni.switchTab({
                                url: '/pages/index/index'
                            });
                        } else {
                            uni.showToast({
                                title: '账号或密码错误'
                            })
                        }
                    },
                    fail: (res) => {
                        console.log(res);
                        uni.showToast({
                            title: "接口请求失败:" + res,
                            icon: 'none'
                        });
                    }
                });
                // uni.switchTab({
                //     url:'/pages/index/index'
                // });
                console.log(JSON.stringify(this.login));
            },
            BindInput: function(e) {
                console.log(e.currentTarget.dataset.val, e.detail.value);
                var dataval = e.currentTarget.dataset.val;
                this.login[dataval] = e.detail.value;
            },
            goForget() {
                uni.navigateTo({
                    url: '/pages/login/forget-pwd/forget-pwd'
                });
            },
            goRegister() {
                uni.navigateTo({
                    url: '/pages/login/regiset/regiset'
                })
            }
        }
    }
</script>

<style>
    page {
        min-height: 100%;
        background-color: #FFFFFF;
    }

    .content {
        padding: 0px;
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: #fff;
    }

    .has-mgtb-10 {
        margin: 30rpx 30px;
    }

    .loginbtn button {
        /* margin-top: 30rpx; */
        height: 88rpx;
        width: 80%;
        line-height: 88rpx;
        color: #ffffff;
        font-size: 32rpx;
        border-radius: 44rpx;
        outline: 0;
        display: block;
        margin: 30rpx auto;
        font-family: inherit;
        background: #4f99ff;
        opacity: 0.8;
    }

    .welcome {
        position: relative;
        left: 50upx;
        top: -90upx;
        font-size: 46upx;
        color: #555;
        text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
    }

    button:after {
        border: 2rpx solid #f2f2f2;
    }

    .logoimg {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        padding: 80rpx 250rpx;
    }

    .is-input1 {
        height: 88rpx;
        width: 100%;
        line-height: 88rpx;
        padding: 12rpx;
        color: #353535;
        font-size: 32rpx;
        box-sizing: border-box;
        appearance: none;
        border: 2rpx solid #e5e5e5;
        box-shadow: none;
        border-radius: 44rpx;
        outline: 0;
        display: block;
        padding-left: 30rpx;
        padding-bottom: 30rpx;
        margin: 0;
        font-family: inherit;
        background: #fff;
        resize: none;
    }
</style>